﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一个简单的鼠标跟随demo（请移动鼠标）</title>
<script src="../js/jquery.min.js"></script>
<style>
 * {
	margin:0;
	padding:0
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>

<script>
let canvas = document.getElementById("myCanvas");
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;

let ctx = canvas.getContext("2d");
let R = 0,
    G = 70,
    B = 255,
    rs = 1,
    gs = 1,
    bs = 1;

ctx.fillRect(0, 0, width, height);

function Circle(x, y, size, color, opc) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.opc = opc
}
Circle.prototype.draw = function() {
    ctx.beginPath();
    ctx.strokeStyle = this.color;

    ctx.lineWidth = 4
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
    ctx.stroke();
}

Circle.prototype.update = function() {
    this.size = this.size + 1;
    this.opc = (60 - this.size) / 60;
    this.color = `rgba(${R},${G},${B},${this.opc})`
}
// let circle = new Circle(100,100,10,"red");
let circleList = [];

function loop() {
    ctx.clearRect(0, 0, width, height);
    ctx.fillRect(0, 0, width, height);
    changeColor();
    circleList.forEach((v, i) => {
        if (v.size >= 60) {
            circleList.splice(i, 1);
            return;
        }
        v.draw();
        v.update()
    })
    requestAnimationFrame(loop)
}
loop()
//改变颜色
function changeColor() {
    if (R == 0 || R == 255) rs *= -1;
    if (G == 0 || G == 255) gs *= -1;
    if (B == 0 || B == 255) bs *= -1;
    R += 1 * rs;
    G += 1 * gs;
    B += 1 * bs;
}

// 响应事件
canvas.addEventListener("mousemove", function(e) {
    circleList.push(new Circle(e.clientX, e.clientY, 20, `rgba(${R},${G},${B},${1})`, 1))
})
</script>

</body>
</html>
